<template>
    <div class="contaier">
        <van-nav-bar title="21天抗痘计划" left-text="" @click-left="onClickLeft" left-arrow sticky>
            <template #right>
                <img src="../../assets/分享.png" alt="" style="width: 30px;height: 30px;">
            </template>
        </van-nav-bar>
        <div>
            <div class="cultiavtion">
                <div class="cult-img">
                    <img src="../../assets/img/养成4.png" alt="" />
                </div>
                <van-tabs v-model:active="active" class="act" sticky>
                    <van-tab title="介绍">
                        <div class="cult">
                            <div class="cult-box">
                                <div class="cult-left" style="margin-top: 10px;"> <span
                                        style="color: #39d167;margin-left: 10px;">•</span> 难度系数:
                                </div>
                                <div class="cult-right" style="margin-top: 10px;">
                                    &nbsp; &nbsp;<van-icon name="star"
                                        style="color:#ffa800 !important;; z-index: 99999 " />
                                    <van-icon name="star" style="color:#ffa800 !important;; z-index: 99999 " />
                                </div>
                            </div>

                            <div class="cult-box">
                                <div class="cult-left">
                                    <span style="color: #39d167;margin-left: 10px;">•</span> 适用人群:
                                </div>
                                <div class="cult-right">
                                    &nbsp; &nbsp; 青春期，上班族
                                </div>
                            </div>

                            <div class="cult-box">
                                <div class="cult-left"> <span style="color: #39d167;margin-left: 10px;">•</span>
                                    预期效果:
                                </div>
                                <div class="cult-right">
                                    &nbsp; &nbsp; 减轻痘痘症状
                                </div>
                            </div>
                            <div style="border-top: 1px solid #f4f4f4;margin-top: 10px;width: 90%;">
                                <div style="margin-top: 10px;">
                                    <p style="padding-right: 12px;">
                                        痘痘长哪儿最不让人担心？腰上还是别人脸上？
                                    </p>
                                    <p style="padding-right: 5px;font-size: 16px;margin-top: 5px">
                                        废话,如果能不长,谁会要那种东西！所以我们来聊一</p>
                                    <p style="margin-top: 5px">下怎么祛痘。痘痘的成因非常多,不一定是因为吃太</p>
                                    <p style="margin-top: 5px">油,或者脸没洗干净，本计划主要针对青春期，由于雄</p>
                                    <p style="margin-top: 5px">性激素分泌过多导致的痘痘,同时对于成年后由于不良</p>
                                    <p style="margin-top: 5px">习惯和压力带来的痘痘有一定效果。</p>
                                    <p style="margin-top: 5px">其实祛痘并没有什么神奇的方法,也不存在什么偏方,</p>
                                    <p style="margin-top: 5px">通过每天坚持下来的小习惯,可以改善皮肤状况,调节</p>
                                    <p style="margin-top: 5px">特别说明:本方案适合轻度痤疮用户,如果你的痤疮</p>
                                    <p style="margin-top: 5px">（痘痘）症状非常严重,建议咨询医生,确定成因后配</p>
                                    <p style="margin-top: 5px">内分泌和激素水平,帮助缓解痘痘症状。</p>
                                </div>
                            </div>
                            <div class="center" style="position: relative;">
                                <h3 style="font-weight: 550;">分享评论</h3>
                                <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/head.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 800;">giraffe</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-15 23:52</span>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#21天战痘计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        其实最重要的就是按时早睡、勤洗脸、不吃刺激食</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        物，维持心情稳定，用这个来监督一下自己，最近起</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        色好多了，痘痘也都下去了。建议赶紧上一个去痘印</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        和平痘疤的专栏</p>
                                </div>
                                <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/qiang.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 700;">I never left</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-14 10:03</span>
                                    </div>
                                </div>
                                <div class="bottom1">
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#21天战痘计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                       专业战痘二十年，伤不起啊，现在再也不相信什么化</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                       妆品能祛痘了。。。这个方案毕竟比较科学，长期坚</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                       持营改有用吧，还不错</p>
                                </div>
                                   <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/tu.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 700;">西瓜</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-12 13:43</span>
                                    </div>
                                </div>
                                <div class="bottom1">
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#21天战痘计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                       专业战痘二十年，伤不起啊，现在再也不相信什么化</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                       妆品能祛痘了。。。这个方案毕竟比较科学，长期坚</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                       持营改有用吧，还不错</p>
                                </div>
                            </div>

                        </div>
                    </van-tab>
                    <van-tab title="目录">
                        <div class="day">
                            <div class="day1"><b>共21日</b></div>
                            <div class="day2">
                                <ul>
                                    <li>01日</li>
                                    <li class="hj" style="margin-left: -176px;">准备一瓶中性洗面奶</li>
                                </ul>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">

                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>02日</li>
                                        <li class="hj" style="margin-left: -209px;">回到家马上洗脸</li>
                                    </ul>
                                    <div
                                        style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -10PX;">

                                    </div>
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>03日</li>
                                        <li class="hj" style="margin-left: -260px;">烫洗毛巾</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 0.5px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">

                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>04日</li>
                                        <li class="hj" style="margin-left: -176px;">不熬夜，0点以前入睡</li>
                                    </ul>
                                    <div
                                        style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                    </div>
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>05日</li>
                                        <li class="hj" style="margin-left: -176px;">尝试三种蔬菜1中水果</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>

                                        <li>06日</li>
                                        <li class="hj" style="margin-left: -230px;">把零食封起来</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>07日</li>
                                        <li class="hj" style="margin-left: -209px;">出门前使用面霜</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>08日</li>
                                        <li class="hj" style="margin-left: -230px;">10点之前上床</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>09日</li>
                                        <li class="hj" style="margin-left: -209px;">今天不吃猪牛肉</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>10日</li>
                                        <li class="hj" style="margin-left: -230px;">跑步10分钟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>11日</li>
                                        <li class="hj" style="margin-left: -145px;">检查所有化妆品的酸碱性</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>12日</li>
                                        <li class="hj" style="margin-left: -209px;">掀起你的刘海来</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>13日</li>
                                        <li class="hj" style="margin-left: -209px;">手机屏幕不碰脸</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>14日</li>
                                        <li class="hj" style="margin-left: -238px;">跑步10分钟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>15日</li>
                                        <li class="hj" style="margin-left: -238 px;">和面膜说拜拜</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>16日</li>
                                        <li class="hj" style="margin-left: -230px;">拒绝去美容院</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                    <div style="margin-top: 15px;">
                                    <ul>
                                        <li>17日</li>
                                        <li class="hj" style="margin-left: -209px;">嘿，别漏掉防晒</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                    <div style="margin-top: 15px;">
                                    <ul>
                                        <li>18日</li>
                                        <li class="hj" style="margin-left: -209px;">不用粉底和BB霜</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                    <div style="margin-top: 15px;">
                                    <ul>
                                        <li>19日</li>
                                        <li class="hj" style="margin-left: -230px;">鱼虾照常吃啊</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                    <div style="margin-top: 15px;">
                                    <ul>
                                        <li>20日</li>
                                        <li class="hj" style="margin-left: -257px;">别趴着睡</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                      <div style="margin-top: 15px;">
                                    <ul>
                                        <li>21日</li>
                                        <li class="hj" style="margin-left: -197px;">保持头发干净清爽 </li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                            </div>
                        </div>
                    </van-tab>

                </van-tabs>
            </div>

        </div>
    </div>
    <div style="width: 95%;height: 100px;background-color: white;position: fixed;bottom: 0;left: 7px;">
        <button style="width: 98%;height: 50px;background-color:#39d167;margin-top: 42px;border: none;
        outline: none;color: white;position: absolute;left: 5px;border-bottom: 0px;">加入计划</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const active = ref(0);
const onClickLeft = () => {
    router.push({ path: "/jiankang" })
}
</script>

<style lang="scss" scoped>
:deep(.van-icon) {
    color: #000 !important
}

.cultiavtion {
    position: relative;
    width: 100%;
    height: 1500px;
    overflow: hidden;

    .cult-img {
        width: 100%;
        height: 150px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .cult {
        .cult-box {
            width: 120%;
            height: 42px;
        }

        .cult-left {
            float: left;
            height: 40px;
            text-align: center;
            padding-top: 10px;
        }

        .cult-right {
            float: left;
            height: 40px;
            width: 70%;
            text-align: left;
            padding-top: 10px;
        }
    }
}

[data-v-ca42e025] .van-icon {
    color: #ffa800 !important;
}

:deep(.van-tabs__line) {
    position: absolute;
    bottom: 15px;
    left: 0;
    z-index: 1;
    background: #39d167;
    border-radius: var(--van-tabs-bottom-bar-height);
}

.day {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-left: 15px;

    .day1 {
        width: 100%;
        height: 30px;
        font-size: 19px;
        margin-left: 1px;
    }

    .day2 {
        width: 100%;
        height: 480px;
        margin-top: 15px;
        overflow-y: scroll;

        ul {
            height: 50px;
            display: flex;
            justify-items: center;

            li {
                color: #a7a7a7;
                margin-left: 1px;
            }

            .hj {
                margin-left: -150px;
            }
        }
    }
}

.center {
    h3 {
        margin-top: 60px;
        margin-left: 10px;
        margin-bottom: 25px;
    }

    .top {
        position: absolute;
        width: 100%;
        height: 50px;

        .top_item {
            // background-color: red;
            position: absolute;
            width: 100%;
            height: 50px;
        }

        // background-color: red;
    }

    .bottom {
        margin-top: 75px;
        width: 100%;
        height: 120px;
        // background-color: gray;
        border-bottom: 1px solid #f4f4f4;
    }

    .bottom1 {
        margin-top: 40px;
        width: 100%;
        height: 120px;
        border-bottom: 1px solid #f4f4f4;
    }

    .bottom2 {
        // margin-top: 75px;
        width: 100%;
        height: 120px;
        // background-color: gray;
        border-bottom: 1px solid #f4f4f4;
    }
}
</style>